<script setup>
import { Value } from 'sass'
import { ref } from 'vue'
import LeftSon1 from './component/left/son1.vue'
import LeftSon2 from './component/left/son2.vue'
import RightSon1 from './component/right/son1.vue'
import RightSon2 from './component/right/son2.vue'
import RightSon3 from './component/right/son3.vue'
import Bottom from './component/Bottom.vue'
const list = ref([
  {
    name: '上游企业',
    Value: 6
  },
  {
    name: '中游企业',
    Value: 5
  },
  {
    name: '下游企业',
    Value: 34
  }
])

const son3Height = ref(190)
const changSon3Height = (value) => {
  son3Height.value = value
}
</script>

<template>
  <div class="industry">
    <div class="topbox">
      <p v-for="(item, index) in list" :key="index">
        <span>{{ item.name }} </span>
        <span>{{ item.Value }} <i>家</i></span>
      </p>
    </div>
    <LeftBox width="500">
      <LeftSon1 />
      <LeftSon2 />
    </LeftBox>
    <RightBox width="500">
      <RightSon1 @changSon3Height="changSon3Height" />
      <RightSon2 />
      <RightSon3 :height="son3Height" />
    </RightBox>
    <Bottom />
  </div>
</template>
<style scoped lang="scss">
.industry {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  background: url('@img/industry/industry_bg.png');
  background-size: cover;

  .topbox {
    position: absolute;
    top: 100px;
    left: 50%;
    transform: translateX(-50%);
    margin-left: 65px;
    display: flex;

    p {
      width: 166px;
      height: 117px;
      margin: 0 42px;
      padding: 35px 0 0 80px;
      display: flex;
      flex-direction: column;

      &:nth-child(1) {
        background: url('@img/industry/top_icon01.png');
        background-size: 100% 100%;
      }

      &:nth-child(2) {
        background: url('@img/industry/top_icon02.png');
        background-size: 100% 100%;
      }

      &:nth-child(3) {
        background: url('@img/industry/top_icon03.png');
        background-size: 100% 100%;
      }

      span:last-child {
        font-size: 27px;
        margin-top: 5px;

        i {
          color: #a7b1bb;
          margin-left: 5px;
          font-size: 14px;
          font-style: normal;
        }
      }
    }
  }
}
</style>
